import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { CheckBox} from 'iftide';

export default class Basic extends Component{
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <View>
                <View style={styles.listTopBottom}>
                    <CheckBox
                        label = '选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1'
                        value = 'value1'
                        desc = '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字'
                        isChecked = {true}
                        onChange = {(checked,value) => alert(value+' - '+checked)}
                    />
                </View>
                <View style={styles.listBottom}>
                    <CheckBox
                        label = '选项2'
                        value =  'value2'
                        onChange = {(checked,value) =>  alert(value+' - '+checked)}
                    />
                </View>
                <View style={styles.listBottom}>
                    <CheckBox
                        label = '选项3'
                        value = 'value3'
                        disabled = {true}
                        isChecked = {true}
                        onChange = {(checked,value) => alert(value+' - '+checked)}
                    />
                </View>
                <View style={styles.listBottom}>
                    <CheckBox
                        label = '选项4'
                        value = 'value4'
                        disabled = {true}
                        onChange = {(checked,value) =>  alert(value+' - '+checked)}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    listTopBottom: {
        flexDirection: 'column',
        borderTopWidth: 1,
        borderTopColor: '#d8d8d8',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'center',
    },
    listBottom: {
        flexDirection: 'column',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'center',
    },
});